<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1600, initial-scale=1.0">
    <link rel="stylesheet" href="icofont/css/all.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="shortcut icon" href="images/favicon.ico">
    <title>创建问卷</title>
</head>

<body>
    <div class="nav">
        <a href="#"><img src="images/logo.png" width="130" height="48"></a>
        <ul>
            <li><a href="/query/manager"><span class="fas font">&#xf21b;</span>管理员入口</a></li>
            <li><a href="/query/user/search"><span class="fas font">&#xf7f2;</span>我的问卷</a></li>
            <li>
                <div class="usr">
                    <span class="fas font">&#xf508;</span>${user.userName}
                    <div class="choice">
                        <span class="fas font"><a href="/query/user">&#xf02d;用户信息</a></span>
                        <p class="line"></p>
                        <span class="fas font"><a href="/query/logout">&#xf14d;退出登录</a></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div>
        <div class="menu">
            <span><a href="/query/user/addQuery">+创建问卷</a></span>
            <span class="fas font"><a href="/query/user/search">&#xf002;&nbsp;&nbsp;搜索问卷</a></span>
            <span class="fas font"><a href="/query/user/updatePassword">&#xf084;&nbsp;&nbsp;修改密码</a></span>
            <span class="fas font"><a href="/query/user">&#xf2c2;&nbsp;&nbsp;用户信息</a></span>
            <span class="fas font"><a href="/query/logout">&#xf14d;&nbsp;&nbsp;退出登录</a></span>
            <div class="add">
                <input type="button" id="add1" value="增加单选" class="btn btn-primary btn5" onclick="addQuestion(1)">
                <input type="button" id="add2" value="增加多选" class="btn btn-primary btn5" onclick="addQuestion(2)">
                <input type="button" id="add3" value="增加填空" class="btn btn-primary btn5" onclick="addQuestion(3)">
                <input type="button" id="submit" value="发布问卷" class="btn btn-primary btn5">
            </div>
        </div>
        <div class="content">
            <div class="title">
                <span class="fas font">&#xf15b;&nbsp;&nbsp;创建问卷</span>
            </div>
            <div class="questions">
                <form class="add-question" action="#" method="post">
                    <div class="query-title">
                        <div class="config-items">
                            <div class="result-content">
                                <table width="100%" class="insert-tab">
                                    <tr>
                                        <th><i class="require-red">*</i>问卷标题</th>
                                        <td><input type="text" id="" value="" placeholder="问卷标题" size="32"
                                                name="queryTitle" class="common-text" maxlength="32"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="question1">
                        <div>
                            <div class="config-items">
                                <div class="result-content">
                                    <table width="100%" class="insert-tab">
                                        <tr>
                                            <th><i class="require-red">*</i>单选题题干</th>
                                            <td><input type="text" id="" value="" placeholder="单选题题干" size="32"
                                                    name="title1" class="common-text" maxlength="256"></td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项A</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项A" name="A"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项B</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项B" name="B"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项C</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项C" name="C"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项D</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项D" name="D"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <td>
                                                <input type="button" name="delete" value="删除问题" class="btn btn6"
                                                    onclick="remove(this)">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="question2">
                        <div>
                            <div class="config-items">
                                <div class="result-content">
                                    <table width="100%" class="insert-tab">
                                        <tr>
                                            <th><i class="require-red">*</i>多选题题干</th>
                                            <td><input type="text" id="" value="" placeholder="多选题题干" size="32"
                                                    name="title2" class="common-text" maxlength="256"></td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项A</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项A" name="A"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项B</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项B" name="B"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项C</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项C" name="C"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><i class="require-red">*</i>选项D</th>
                                            <td><input type="text" id="" value="" size="32" placeholder="选项D" name="D"
                                                    class="common-text" maxlength="32">
                                            </td>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <td>
                                                <input type="button" name="delete" value="删除问题" class="btn btn6"
                                                    onclick="remove(this)">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="question3">
                        <div>
                            <div class="config-items">
                                <div class="result-content">
                                    <table width="100%" class="insert-tab">
                                        <tr>
                                            <th><i class="require-red">*</i>问答题题干</th>
                                            <td><input type="text" id="" value="" placeholder="问答题题干" size="32"
                                                    name="title3" class="common-text" maxlength="256"></td>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <td>
                                                <input type="button" name="delete" value="删除问题" class="btn btn6"
                                                    onclick="remove(this)">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <p class="line"></p>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    var question1;
    var question2;
    var question3;
    $("document").ready(function () {
        question1 = $(".question1").clone();
        question2 = $(".question2").clone();
        question3 = $(".question3").clone();
    })
    function addQuestion(choice) {
        if (choice == 1) {
            $(".questions>form").append(question1.html());
        } else if (choice == 2) {
            $(".questions>form").append(question2.html());
        } else {
            $(".questions>form").append(question3.html());
        }
    }
    function remove(button) {
        var parent = button.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
        parent.parentNode.removeChild(parent);
    }
    $("#submit").click(function () {
        var flag = 1;
        var questions = new Array();
        var index = 0;
        var inputs = $("form.add-question").find(":text");
        for (let i = 0; i < inputs.length; i++, index++) {
            var name = inputs[i].getAttribute("name");
            if (name == "queryTitle") {
                var description = inputs.eq(i).val();
                if (!description) {
                    flag = 0;
                }
                questions[index] = {
                    description: description,
                    order: index,
                    type: 0,
                    choiceA: null,
                    choiceB: null,
                    choiceC: null,
                    choiceD: null
                }
            } else if (name == "title1") {
                var description = inputs.eq(i).val();
                if (!description) {
                    flag = 0;
                }
                i++;
                var A = inputs.eq(i).val();
                if (!A) {
                    flag = 0;
                }
                i++;
                var B = inputs.eq(i).val();
                if (!B) {
                    flag = 0;
                }
                i++;
                var C = inputs.eq(i).val();
                if (!C) {
                    flag = 0;
                }
                i++;
                var D = inputs.eq(i).val();
                if (!D) {
                    flag = 0;
                }
                questions[index] = {
                    description: description,
                    orderNumber: index,
                    type: 1,
                    choiceA: A,
                    choiceB: B,
                    choiceC: C,
                    choiceD: D
                }
            } else if (name == "title2") {
                var description = inputs.eq(i).val();
                if (!description) {
                    flag = 0;
                }
                i++;
                var A = inputs.eq(i).val();
                if (!A) {
                    flag = 0;
                }
                i++;
                var B = inputs.eq(i).val();
                if (!B) {
                    flag = 0;
                }
                i++;
                var C = inputs.eq(i).val();
                if (!C) {
                    flag = 0;
                }
                i++;
                var D = inputs.eq(i).val();
                if (!D) {
                    flag = 0;
                }
                questions[index] = {
                    description: description,
                    orderNumber: index,
                    type: 2,
                    choiceA: A,
                    choiceB: B,
                    choiceC: C,
                    choiceD: D
                }
            } else if (name == "title3") {
                var description = inputs.eq(i).val();
                if (!description) {
                    flag = 0;
                }
                questions[index] = {
                    description: description,
                    orderNumber: index,
                    type: 3,
                    choiceA: null,
                    choiceB: null,
                    choiceC: null,
                    choiceD: null
                }
            }
        }
        if(questions.length==1){
            alert("提交失败，问卷为空!");
        }else if (flag == 0) {
            alert("输入不能为空!");
        } else {
            var param = {"questions": JSON.stringify(questions)};
            $.post("/query/user/addQuery",param,function(result){
                if(result=="false"){
                    alert("创建失败，id已用尽，请联系管理员!");
                }else{
                    var url = window.document.location.href;
                	var str = url.split("/");
                	url = str[0]+"//"+str[2]+"/"+str[3]+"/"+result;
                    alert("创建成功，问卷链接为:"+url);
                    location.href = "/query/user/search";
                }
            })
        }
    })
</script>

</html>